<template>
  <div class="template-wrap">
    <menu-top></menu-top>
    <div class="content">
      <div class="content-wrap">
        <div>
          <menu-left ref="left" :href="href"></menu-left>
        </div>
        <el-col>
          <div class="business-plan right-content">
            <el-breadcrumb v-if="!id" separator-class="el-icon-arrow-right">
              <el-breadcrumb-item  :to="{ path: '/companyEdit' }">我的公司</el-breadcrumb-item>
              <el-breadcrumb-item>商业计划书</el-breadcrumb-item>
            </el-breadcrumb>
            <el-breadcrumb v-if="id" separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/bankBankOrderHand' }">我的订单</el-breadcrumb-item>
              <el-breadcrumb-item>商业计划书</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="wrap">
              <rotate-message></rotate-message>
              <div class="wrap-container">
                <div class="title">公司状态：<span>{{passStatus?'初审通过':'初审未通过'}}</span><div style="float:right;font-size:14px;" class="tip-edit">请上传商业计划书附件内容，如果没有商业计划书，请按照下列的问题如实回答。</div></div>
                <div class="plan-wrap">
                    <div class="file-btn">
                        <div class="file-name"><a style="color:#F8B100" :href="info&&info.bpFileInfo?info.bpFileInfo.fileUrl:''">{{fileName}}</a></div>
                        <el-upload
                        v-if="!id"
                        class="upload-demo"
                        :action="upLoadUrl"
                        :on-progress="()=>{this.loadingState = true}"
                        :on-remove="handleRemove"
                        :show-file-list="false"
                        :on-success="handleFileSuccess"
                       >
                        <el-button type="primary"  :loading="loadingState" class="btn">{{loadingState?'上传中':'上传'}}</el-button >
                        </el-upload>
                    </div>
                    <div v-if="!id" class="edit-btn">
                        <div @click="editBtn" v-if="state" class="btn">编辑</div>
                    </div>
                    <el-form :model="information" :rules="rules" ref="information" >
                        <div class="info-item">
                            <div class="type-title">现有能力</div>
                            <el-form-item prop="cuPeopleInfo">
                                <div class="info-list">
                                    <div class="question">企业现有人力资源配置（包括企业管理人员、研发人员、生产人员、销售人员的结构和基本情况）</div>
                                    <div v-show="state" class="answer">{{information.cuPeopleInfo}}</div>
                                    <el-input
                                    v-show="!state"
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.cuPeopleInfo">
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item prop="cuDevelopInfo">
                                <div class="info-list">
                                        <div class="question">企业研发能力（包括企业的研发队伍研发工作资金投入以及近年来取得的研究开发结果）</div>
                                        <div v-show="state" class="answer">{{information.cuDevelopInfo}}</div>
                                    <el-input v-show="!state"
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.cuDevelopInfo">
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item prop="cuProductCondition">
                                <div class="info-list">
                                    <div class="question">企业现有生产设施设备条件（包括企业已具备的生产条件）</div>
                                    <div v-show="state" class="answer">{{information.cuProductCondition}}</div>
                                    <el-input v-show="!state"
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.cuProductCondition">
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item prop="cuSalesInfo">
                                <div class="info-list">
                                        <div class="question">企业营销能力（包括企业经营模式和市场策划能力、销售推荐机构等）</div>
                                        <div v-show="state" class="answer">{{information.cuSalesInfo}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.cuSalesInfo">
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item prop="cuOtherInfo">
                                <div class="info-list">
                                        <div class="question">其他特殊能力（包括已获得的质量认证、高新技术企业认证以及其他特殊资格或证明等）</div>
                                        <div v-show="state" class="answer">{{information.cuOtherInfo}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.cuOtherInfo">
                                    </el-input>
                                </div>
                            </el-form-item>          
                        </div>
                        <div class="info-item">
                            <div class="type-title">发展情况</div>
                            <el-form-item prop="deOpenInfo">
                                <div class="info-list">
                                    <div class="question">企业最初成立情况及发展历程</div>
                                    <div v-show="state" class="answer">{{information.deOpenInfo}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.deOpenInfo">
                                    </el-input>
                                </div>
                            </el-form-item>    
                            <el-form-item prop="deRewardInfo">
                                <div class="info-list">
                                    <div class="question">曾经获得(或申请过)科技项目支持情况</div>
                                    <div v-show="state" class="answer">{{information.deRewardInfo}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.deRewardInfo">
                                    </el-input>
                                </div>
                            </el-form-item>    
                            <el-form-item prop="deProductInfo">
                                <div class="info-list">
                                    <div class="question">重大项目开发与主要产品上市</div>
                                    <div v-show="state" class="answer">{{information.deProductInfo}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.deProductInfo">
                                    </el-input>
                                </div>
                            </el-form-item>   
                            <el-form-item prop="deFinanceInfo">
                                <div class="info-list">
                                    <div class="question">重大融资事件</div>
                                    <div v-show="state" class="answer">{{information.deFinanceInfo}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.deFinanceInfo">
                                    </el-input>
                                </div>
                            </el-form-item>    
                            <el-form-item prop="deOtherInfo">
                                <div class="info-list">
                                    <div class="question">企业认为的其他重大事件</div>
                                    <div v-show="state" class="answer">{{information.deOtherInfo}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.deOtherInfo">
                                    </el-input>
                                </div>
                            </el-form-item>     
                        </div>   
                        <div class="info-item">
                            <div class="type-title">市场概述</div>
                            <el-form-item prop="maProductInfo">
                                <div class="info-list">
                                    <div class="question">主营产品的市场概况及需求情况（简要主营业务产品国内外市场容量、发展状况、未来发展趋势）</div>
                                    <div v-show="state" class="answer">{{information.maProductInfo}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.maProductInfo">
                                    </el-input>
                                </div>
                            </el-form-item>    
                            <el-form-item prop="maTargetMasketInfo">
                                <div class="info-list">
                                    <div class="question">主营产品的目标市场（结合产品优势、企业优势、确定该产品的细分市场定位）</div>
                                    <div v-show="state" class="answer">{{information.maTargetMasketInfo}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.maTargetMasketInfo">
                                    </el-input>
                                </div>
                            </el-form-item>     
                        </div>   
                        <div class="info-item">
                            <div class="type-title">主营产品的竞争优势分析</div>
                            <el-form-item prop="prContendersInfo">
                                <div class="info-list">
                                    <div class="question">主营产品的主要竞争者（在主营产品的目标市场中，主要的同类产品名称、产品开发企业、产品开发、产品销售情况）</div>
                                    <div v-show="state" class="answer">{{information.prContendersInfo}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.prContendersInfo">
                                    </el-input>
                                </div>
                            </el-form-item>    
                            <el-form-item prop="prTechAdvantage">
                                <div class="info-list">
                                    <div class="question">主营产品的技术性能比较优势（根据主要竞争对手的青睐，分析本项目产品的技术性能比较优势，要有数据分析，对比）</div>
                                    <div v-show="state" class="answer">{{information.prTechAdvantage}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.prTechAdvantage">
                                    </el-input>
                                </div>
                            </el-form-item>  
                            <el-form-item prop="prMasketAdvantage">
                                <div class="info-list">
                                    <div class="question">主营产品的其他市场竞争优势（从产品的顾客价值、价格优势、生成及销售合作网络建设、行为认知、企业管理、客户管理等方面进行阐述）</div>
                                    <div v-show="state" class="answer">{{information.prMasketAdvantage}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.prMasketAdvantage">
                                    </el-input>
                                </div>
                            </el-form-item>  
                            <el-form-item prop="prDevelopStrategy">
                                <div class="info-list">
                                    <div class="question">主营产品的开发、生产策略（主要阐述如何利用企业优势，合理组织各种资源，组织产品的开发与生产，提高产品的性能，降低产品成本，提高产品综合竞争能力）</div>
                                    <div v-show="state" class="answer">{{information.prDevelopStrategy}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.prDevelopStrategy">
                                    </el-input>
                                </div>
                            </el-form-item>  
                            <el-form-item prop="prSalesStrategy">
                                <div class="info-list">
                                    <div class="question">主营产品的市场营销策略（阐述企业制定的项目产品市场推广计划，产品销售计划，及制定计划是所采取的各种策略）</div>
                                    <div v-show="state" class="answer">{{information.prSalesStrategy}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.prSalesStrategy">
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item prop="prProfitModel">
                                <div class="info-list">
                                    <div class="question">主营产品获利模式（阐述如何将项目产品转化为商业价值，转化为商品，实现商业价值、形成现金流、获取利润的模式）</div>
                                    <div v-show="state" class="answer">{{information.prProfitModel}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.prProfitModel">
                                    </el-input>
                                </div>
                            </el-form-item>   
                            <el-form-item prop="prPeoplePlan">
                                <div class="info-list">
                                    <div class="question">公司治理结构及人力资源规划（阐述本项目在开发、生产、销售等环节上人力资源的设置和培养）</div>
                                    <div v-show="state" class="answer">{{information.prPeoplePlan}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.prPeoplePlan">
                                    </el-input>
                                </div>
                            </el-form-item>     
                        </div> 
                        <div class="info-item">
                            <div class="type-title">发展预测</div>
                            <el-form-item prop="plFuturePlan">
                                <div class="info-list">
                                    <div class="question">分析企业未来1-3年的定位及发展规划</div>
                                    <div v-show="state" class="answer">{{information.plFuturePlan}}</div>
                                    <el-input
                                    type="textarea" v-show="!state"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="information.plFuturePlan">
                                    </el-input>
                                </div>
                            </el-form-item>    
                            <div v-if="!state" class="btn" @click="submitBtn('information')">确定</div>
                        </div>      
                    </el-form>    
                    <!-- </div> -->
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
let CONSTANT = require('../../../constant/constant.js'),
    common = require('../../../common.js');
import VueRouter from 'vue-router'
export default {
  name: 'menulist',
  data(){
    return{
      id:'',
      href:'',
      state:false,
      passStatus:'',
      upLoadUrl:'',
      loadingState:false,
      information:{
          cuPeopleInfo:'',
          cuDevelopInfo:'',
          cuProductCondition:'',
          cuSalesInfo:'',
          cuOtherInfo:'',
          deOpenInfo:'',
          deRewardInfo:'',
          deProductInfo:'',
          deFinanceInfo:'',
          deOtherInfo:'',
          maProductInfo:'',
          maTargetMasketInfo:'',
          prContendersInfo:'',
          prTechAdvantage:'',
          prMasketAdvantage:'',
          prDevelopStrategy:'',
          prSalesStrategy:'',
          prProfitModel:'',
          prPeoplePlan:'',
          plFuturePlan:''
      },
      fileName:'',
      rules: {
          cuPeopleInfo : [
            { required: true, message: '请输入企业现有人力资源配置', trigger: 'blur' }
          ],
          cuDevelopInfo : [
            { required: true, message: '请输入企业研发能力', trigger: 'blur' }
          ],
          cuProductCondition : [
            { required: true, message: '请输入企业现有生产设施设备条件', trigger: 'blur' }
          ],
          cuSalesInfo : [
            { required: true, message: '请输入企业营销能力', trigger: 'blur' }
          ],
          cuOtherInfo : [
            { required: true, message: '请输入他特殊能力', trigger: 'blur' }
          ],
          deOpenInfo : [
            { required: true, message: '请输入企业最初成立情况及发展历程', trigger: 'blur' }
          ],
          deRewardInfo : [
            { required: true, message: '请输入曾经获得(或申请过)科技项目支持情况', trigger: 'blur' }
          ],
          deProductInfo : [
            { required: true, message: '请输入重大项目开发与主要产品上市', trigger: 'blur' }
          ],
          deFinanceInfo:[
            { required: true, message: '请输入重大融资事件', trigger: 'blur' }
          ],
          deOtherInfo:[
            { required: true, message: '请输入企业认为的其他重大事件', trigger: 'blur' }
          ],
          maProductInfo:[
            { required: true, message: '请输入主营产品的市场概况及需求情况', trigger: 'blur' }
          ],
          maTargetMasketInfo:[
            { required: true, message: '请输入主营产品的目标市场', trigger: 'blur' }
          ],
          prContendersInfo:[
            { required: true, message: '请输入主营产品的主要竞争者', trigger: 'blur' }
          ],
          prTechAdvantage:[
            { required: true, message: '请输入主营产品的技术性能比较优势', trigger: 'blur' }
          ],
          prMasketAdvantage:[
            { required: true, message: '请输入主营产品的其他市场竞争优势', trigger: 'blur' }
          ],
          prDevelopStrategy:[
            { required: true, message: '请输入主营产品的开发、生产策略', trigger: 'blur' }
          ],
          prSalesStrategy:[
            { required: true, message: '请输入主营产品的市场营销策略', trigger: 'blur' }
          ],
          prProfitModel:[
            { required: true, message: '请输入主营产品获利模式', trigger: 'blur' }
          ],
          prPeoplePlan:[
            { required: true, message: '请输入公司治理结构及人力资源规划', trigger: 'blur' }
          ],
          plFuturePlan:[
            { required: true, message: '请输入分析企业未来1-3年的定位及发展规划', trigger: 'blur' }
          ],
        }
    }
  },
  components: {
    'menu-top':() => import('../../common/Menu-Top'),
    'menu-left':() => import('../../common/Menu-Left'),
    "rotate-message": () => import("../../common/rotate-message")
  },  
  mounted(){
      let sessionId = common.getCookie('sessionId');
      this.upLoadUrl =CONSTANT.URL.BASE.ADMINUPLOAD+ '?sessionId='+sessionId;
      this.getState()
      this.getBussiness()
  },   
  created(){
      this.id = this.$router.currentRoute.query.id;
  }, 
  watch: {  
      $route(to, from) {  
        // this.$refs.left.activePath()
      }  
  },
  methods:{
      handleRemove(file, fileList) {      // 图片上传
            let deleteUrl = file.url;
            this.information.bpFileId = '';
      },       
      handleFileSuccess(res, file) {
            if(res.status == 200){
                let picItem = res.data.bussData;
                this.loadingState = false;
                this.information.bpFileId = picItem.fileId;
                this.fileName =  picItem.fileName;
                
            }
        },
      getState(){
            let  url = CONSTANT.URL.SYSTEM.FINDUSERCANFINANCING,
                data = {},
                dataForm = {}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.passStatus= res.data.bussData
                }else{
                
                }
            })
        },
        editBtn(){
            this.state = false;
        },
        getBussiness(){
            let api;
            if(this.id){
                api = CONSTANT.URL.CHANNEL.FINDBUSSINESSPLAN
            }else{
                api = CONSTANT.URL.SYSTEM.FINDUSERBUSSINESSPLAN
            }
            let  url = api,
                data = {},
                dataForm = {userId:this.id}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.info= res.data.bussData;
                    let info =  res.data.bussData;
                    let obj = {
                        cuPeopleInfo:'',
                        cuDevelopInfo:'',
                        cuProductCondition:'',
                        cuSalesInfo:'',
                        cuOtherInfo:'',
                        deOpenInfo:'',
                        deRewardInfo:'',
                        deProductInfo:'',
                        deFinanceInfo:'',
                        deOtherInfo:'',
                        maProductInfo:'',
                        maTargetMasketInfo:'',
                        prContendersInfo:'',
                        prTechAdvantage:'',
                        prMasketAdvantage:'',
                        prDevelopStrategy:'',
                        prSalesStrategy:'',
                        prProfitModel:'',
                        prPeoplePlan:'',
                        plFuturePlan:''
                    }
                    if(this.info){
                        this.state = true;
                        this.information = this.info;
                         this.fileName = info.bpFileInfo?info.bpFileInfo.fileName:'';
                        this.fileList = info.bpFileInfo?[{name:info.bpFileInfo.fileName,url:info.bpFileInfo.fileUrl}]:[]
                    }else{
                        this.information = obj
                    }
                    
                }else{
                
                }
            })
        },
        submitBtn(formName) {
            if(this.information.bpFileId){
               this.submitForm()
            }else{
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.submitForm()
                    } else {
                        return false;
                    }
                });
            }
      },
      submitForm(){
        let url = CONSTANT.URL.SYSTEM.SAVEBUSSINESSPLAN;
        let param = JSON.stringify(this.information);
        common.requestAjax(url, param, null, res => {
            if(res.status == 200) {
                this.$message({
                    type: 'success',
                    message: '保存成功!'
                });
                this.state = true;
                this.getBussiness()
            } else {
                this.$message({
                    type: 'error',
                    message: res.msg
                });
            }
        });
      }
  }
}
</script>

<style  lang="scss">
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.content{
  min-height: 100%;
  background-color: #f5f5f5;
  width: 81.3%;
  float: right;
}

.content-wrap{
  overflow: hidden;
}

.business-plan{
  padding-top: 29px;
  .wrap{
    background-color: #f5f5f5;
    .title-head{
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      margin-top: 18px;
      padding-left: 20px;
      font-size: 14px;
      color: #666;
      span{
        color: #0087DC;
        cursor: pointer;
      }
    }
    .wrap-container{
      padding: 11px 60px 33px 29px;
      background-color: #fff;
      margin-top: 20px;
      .el-form-item {
            margin-bottom: 0;
            .el-form-item__content{
                line-height: inherit;
            }
        }
      .title{
        height: 56px;
        line-height: 56px;
        border-bottom: 1px solid #D1D1D1;
        color: #666;
        span{
            color: #111;
            // font-weight: bold;
        }
      }
      .el-textarea{
          margin-top: 19px;
      }
      .el-form-item__error{
          top: 84%;
      }
      .plan-wrap{
        .file-btn{
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #323232;
            margin-top: 20px;
            .file-name{
                float: left;
            }
            .upload-demo{
                float: left;
            }
                .el-upload-list{
                    display: none!important;
                }
            .btn{
                display: inline-block;
                background-color: #ED7018;
                border-color:  #ED7018;
                margin-left: 20px;
                &:hover{
                    background-color: #ED9000;
                    transition:all .2s linear
                } 
            }
        }

        .edit-btn{
            .btn{
                margin-top: 39px;
                width: 80px;
                height: 30px;
                background-color: #6C6C6C;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                font-size: 16px;
                color: #fff;
                text-align: center;
                line-height: 30px;
                cursor: pointer;
                &:hover{
                    background-color: #555;
                    transition:all .2s linear
                } 
            }
        }

        .info-item{
            .btn{
                    width: 120px;
                    height: 42px;
                    line-height: 42px;
                    text-align: center;
                    color: #fff;
                    font-size: 24px;
                    border-radius: 2px;
                    -webkit-border-radius: 2px;
                    background-color: #ED7018;
                    font-size: 14px;
                    cursor: pointer;
                    margin: 30px auto 0;
                    &:hover{
                        background-color: #ED9000;
                        transition:all .2s linear
                    }
                }
            .type-title{
                font-size: 16px;
                color: #F8B100;
                margin-top: 29px;
            }
            .info-list{
                padding: 29px 0;
                // border-bottom: 1px solid rgba(255,255, 255,1);
                border-bottom: 1px solid #e1e1e1;
                font-size: 14px;
                color: #666;
                .el-textarea{
                    width: 50%;
                }
                .answer{
                    width:822px;
                    margin-top: 19px;
                    line-height: 19px;
                    word-wrap:break-word;
                    word-break: break-all;
                }
            }
        }
      }
    }
  }
}

a{
  text-decoration: none;
}
</style>